<template>
	<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
	<view class="goods_detail">
		<view class="back icon-left" :style="{top: getTop}" @click="btnBack"></view>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"
			@change="changeIndex">
			<swiper-item v-for="imageSrc,index in swiperList" :key="index">
				<image :src="imageSrc" mode="widthFix" @click="preview(index)"></image>
			</swiper-item>
		</swiper>
		<view class="indicator">
			<text class="current">{{currentIndex}}</text>
			<text class="split">/</text>
			<text class="total">{{swiperList.length}}</text>
		</view>
		<view class="header_price">
			<text style="font-size: 34rpx;">￥</text>
			<text>{{result.price}}</text>
		</view>
		<view class="example-body">
			<uni-row class="demo-uni-row" :width="nvueWidth">
				<uni-col>
					<view class="name">{{result.name}}</view>
				</uni-col>
			</uni-row>
			<uni-row>
				<view class="subhead">{{result.desc}}</view>
			</uni-row>
		</view>
		<uni-list>
			<uni-list-item clickable showArrow @click="openSKU">
				<template v-slot:body>
					<text class="title" style="font-size: 26rpx;">选择</text>
					<text class="slot-box slot-text content">{{ getInfo  || '请选择规格'}}</text>
				</template>
			</uni-list-item>
			<uni-list-item clickable showArrow @click="popupAddress">
				<template v-slot:body>
					<text class="title" style="font-size: 26rpx;">送至</text>
					<text class="slot-box slot-text content">{{addRess || '请选择地址' }}</text>
				</template>
			</uni-list-item>
			<uni-list-item clickable showArrow @click="popupServe">
				<template v-slot:body>
					<text class="title" style="font-size: 26rpx;">服务</text>
					<text class="slot-box slot-text content">无忧退 快速退款 免费包邮</text>
				</template>
			</uni-list-item>
		</uni-list>
		<uni-section title="详情" type="line" padding="0 22rpx">
			<uni-group>
				<view class="detail" v-for="item,index in detailProperties" :key="index">
					<text class="detail_title">{{item.name}}</text>
					<text class="detail_content">{{item.value}}</text>
				</view>
			</uni-group>
		</uni-section>
		<image v-for="item,index in detailPictures" :key="index" :src="item" mode="widthFix" class="detail_image">
		</image>

		<view class="problem_nav" @click="popupProblem">
			<view>
				<uni-icons type="help" size="34rpx" color="#ffa868" class="problem_left"></uni-icons>
				<text>常见问题</text>
			</view>
			<view>
				<uni-icons type="forward" size="34rpx"></uni-icons>
			</view>
		</view>
		<uni-section title="详情" type="line">
		</uni-section>
		<view class="footer_content">
			<view class="hotGoods" v-for="item in result.hotByDay" :key="item.id" @click="hotGoods(item.id)">
				<image :src="item.picture" mode="widthFix"></image>
				<view class="hotGoods_name">{{item.name}}</view>
				<view class="hotGoods_price">
					<text>￥</text>
					<text class="number">{{item.price}}</text>
				</view>
			</view>
		</view>
		<!-- 商品导航 -->
		<view class="goods-container">
			<uni-goods-nav :options="Options" :fill="true" :button-group="buttonGroup" class="goods-nav"
				@click="leftClick" @buttonClick="btnClick" />
		</view>
		<!-- sku -->
		<vk-data-goods-sku-popup ref="skuPopup" :amount-type="0" v-model="skuKey" border-radius="20"
			buy-now-background-color="#28BA9A" add-cart-background-color="#FFA868" :localdata="goodsInfo"
			:mode="skuMode" @close="SkuPopup" @add-cart="addCart" @buy-now="buyNow"
			@open="change"></vk-data-goods-sku-popup>
		<!-- 选择地址弹出层 -->
		<uni-popup ref="addrPopup" type="bottom" :safe-area="false" @change="change">
			<view class="address-list">
				<view class="address-list-header">
					配送至
					<text class="close icon-close btn-close" @click="getClose"></text>
				</view>
				<scroll-view class="address-list-body">
					<ul>
						<li v-for="item,index in result.userAddresses" :key="item.id">
							<view class="address">
								<view class="address-name">
									{{item.receiver}} {{item.contact}}
								</view>
								<view class="address-addr">
									{{item.fullLocation}}
								</view>
							</view>
							<view class="selected-address" @click="selectAddress(item.id,index)">
								<text class="icon icon-checked"
									:class="{'selected-color': item.isDefault, 'icon-ring': !item.isDefault}"></text>
							</view>
						</li>
					</ul>
				</scroll-view>
				<view class="address-list-footer">
					<button @click="getAddressDetail">新建地址</button>
				</view>
			</view>
		</uni-popup>

		<!-- 问题和服务 -->
		<uni-popup ref="problemPopup" type="bottom" :safe-area="false" @change="change">
			<view class="address-list">
				<view class="address-list-header">
					{{isShow ? '服务说明' : '常见问题' }}
					<text class="close icon-close btn-close" @click="problemTltieClose"></text>
				</view>
				<view class="content" v-if="isShow">
					<view class="item">
						<dl>
							<dt>无忧退货</dt>
							<dd> 自收到商品之日起30天内，可在线申请无忧退货服务（内 裤、食品等特殊商品除外 </dd>
						</dl>
					</view>
					<view class="item">
						<dl>
							<dt>快速退款</dt>
							<dd>收到退货包裹并确认无误后，将在48小时内办理退款， 退款将原路返回，不同银行处理时间不同，预计1-5个工作日到账</dd>
						</dl>
					</view>
					<view class="item">
						<dl>
							<dt>满88元免邮费</dt>
							<dd> 单笔订单金额(不含运费)满88元可免邮费，不满88元， 单笔订单收取10元邮费 </dd>
						</dl>
					</view>
				</view>
				<view class="content" v-else>
					<view class="item">
						<dl>
							<dt>满88购买运费如何收取</dt>
							<dd> 单笔订单金额（不含运费）满88元免邮；不满88元，每单收取10元运费。（港澳台地区需满500元免邮费；不满500元，每单收取30元运费） </dd>
						</dl>
					</view>
					<view class="item">
						<dl>
							<dt>默认使用顺丰快递发货（个别商品使用其它快递）</dt>
							<dd> 配送范围覆盖全国大部分地区（港澳台地区除外） </dd>
						</dl>
					</view>
					<view class="item">
						<dl>
							<dt>如何申请退货</dt>
							<dd> 1. 自收到商品之日起30日内，客户可申请无忧退货，退款将原路返还，不同的银行处理时间不同，预计1-5个工作日到账；</dd>
							<dd> 2. 因小兔鲜儿产生的退货，如质量问题，退货邮费由小兔鲜儿承担，退款完成后会以现金券的形式报销，因客户个人原因产生的退货，购买和寄回运费由客户个人承担；</dd>
						</dl>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getGoodsDetail,
		getGoodsCart
	} from '@/api/goods.js'
	import {
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				goods_id: '',
				currentIndex: 1,
				getTop: '',
				swiperList: [],
				result: {},
				detailProperties: [],
				detailPictures: [],
				Options: [{
					icon: 'heart',
					text: '收藏'
				}, {
					icon: 'chat',
					text: '客服'
				}, {
					icon: 'cart',
					text: '购物车'
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ffa868',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#27ba9b',
						color: '#fff'
					}
				],
				skuMode: 1,
				skuKey: false,
				goodsInfo: {},
				getInfo: '',
				options: {},
				show: false,
				addRess: '',
				isShow: false
			};
		},
		onLoad(query) {
			this.goods_id = query.id
			this.getDetail()
			this.init()
			this.getMenuButton()
		},
		methods: {
			...mapMutations('pay', ['updateGoodinfo']),
			async getDetail() {
				const {
					result
				} = await getGoodsDetail(this.goods_id)
				console.log(result);
				this.result = result
				this.swiperList = result.mainPictures
				this.videoSrc = result.mainVideos
				this.detailProperties = result.details.properties
				this.detailPictures = result.details.pictures
			},
			// 预览图片
			preview(i) {
				uni.previewImage({
					urls: this.swiperList,
					current: this.swiperList[i]
				})
			},
			changeIndex(e) {
				this.currentIndex = e.detail.current + 1
			},
			getMenuButton() {
				const {
					height,
					top,
					right
				} = uni.getMenuButtonBoundingClientRect();
				this.getTop = top + 'px'
			},
			btnBack() {
				uni.navigateBack()
			},
			// 初始化sku
			init() {
				this.options = {}
			},
			// 处理sku数据
			formatter() {
				const formattedSkuList = [];
				this.result.skus.forEach(item => {
					const skuItem = {
						'_id': item.id,
						'goods_id': this.result.id,
						'goods_name': this.result.name,
						'image': item.picture,
						'price': Number(item.price),
						'sku_name_arr': item.specs.map(item => item.valueName),
						'stock': Number(item.inventory)
					};
					formattedSkuList.push(skuItem);
				});


				const specList = [];
				this.result.specs.forEach(item => {
					const secpItem = {
						'name': item.name,
						'list': item.values.map(item => ({
							'name': item.name
						}))
					}
					specList.push(secpItem)
				})

				this.goodsInfo = {
					"_id": this.result.id,
					"name": this.result.name,
					'goods_thumb': this.result.skus[0].picture,
					"sku_list": formattedSkuList,
					"spec_list": specList
				}
			},
			// 点击选择规格
			openSKU() {
				this.skuMode = 1
				this.formatter()
				this.skuKey = true
				this.show = this.skuKey
			},
			// 关闭sku
			SkuPopup() {
				this.getInfo = this.$refs.skuPopup.selectArr.join(' ')
				this.show = this.skuKey
			},
			leftClick(e) {
				if (e.index) {
					uni.switchTab({
						url: '/pages/cart/cart'
					})
				}
			},
			btnClick(e) {
				switch (e.index) {
					case 0:
						this.skuMode = 2
						this.formatter()
						this.skuKey = true
						this.show = this.skuKey
						break;
					case 1:
						this.skuMode = 3
						this.formatter()
						this.skuKey = true
						this.show = this.skuKey
						break;
				}
			},
			async addCart(e) {
				await getGoodsCart({
					skuId: e._id,
					count: e.buy_num
				})
				uni.showToast({
					title: '添加成功！！！'
				})
				this.show = false
				this.skuKey = false
				this.getInfo = e.sku_name_arr.join(' ')
				const res = this.result.userAddresses.find(item => item.isDefault === 1)
				this.addRess = res.fullLocation
			},
			buyNow(e) {
				const res = this.result.userAddresses
				uni.navigateTo({
					url: `/subpkg/toPay/toPay?skuId=${e._id}&count=${e.buy_num}`
				})
				this.updateGoodinfo(res)
				this.show = false
			},
			popupAddress() {
				this.$refs.addrPopup.open()
			},
			getClose() {
				this.$refs.addrPopup.close()
			},
			change(e) {
				this.show = e.show
			},
			selectAddress(id, i) {
				if (this.result.userAddresses[i].isDefault === 1) return this.$refs.addrPopup.close()
				this.result.userAddresses.forEach(item => {
					item.isDefault = 0
					if (item.id === id) item.isDefault = 1
				})
				this.addRess = this.result.userAddresses[i].fullLocation
			},
			getAddressDetail() {
				uni.navigateTo({
					url: '/subpkg/address/AddAddress?id=' + this.result.id
				})

			},
			popupServe() {
				this.isShow = true
				this.$refs.problemPopup.open()
			},
			popupProblem() {
				this.isShow = false
				this.$refs.problemPopup.open()
			},
			problemTltieClose() {
				this.isShow = false
				this.$refs.problemPopup.close()
			},
			hotGoods(id) {
				uni.navigateTo({
					url: '/subpkg/goods_detail/goods_detail?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	.goods_detail {
		background-color: #f4f4f4;
		margin: 0;
		padding: 0;
		padding-bottom: 158rpx !important;

		.back {
			position: fixed;
			left: 50rpx;
			top: 50rpx;
			z-index: 9;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			font-size: 23px;
			color: #fff;
			background-color: rgba(0, 0, 0, 0.5);
		}

		swiper {
			height: 750rpx;

			image,
			video {
				width: 100%;
				height: 100%;
			}
		}

		.indicator {
			height: 40rpx;
			padding: 0 24rpx;
			line-height: 40rpx;
			border-radius: 30rpx;
			color: #fff;
			font-family: Arial, Helvetica, sans-serif;
			background-color: rgba(0, 0, 0, 0.3);
			position: absolute;
			bottom: 900rpx;
			right: 30rpx;
			font-size: 24rpx;

			.split {
				font-size: 24rpx;
				margin: 0 1rpx 0 2rpx;
			}

			.total {
				font-size: 24rpx;
			}
		}

		.header_price {
			height: 130rpx;
			padding: 25rpx 30rpx 0;
			color: #fff;
			font-size: 56rpx;
			box-sizing: border-box;
			background-color: #35c8a9;
		}

		.example-body {
			background-color: #fff;

			.name {
				margin: 20rpx;
				font-size: 32rpx;
				color: #333;
			}
		}

		.subhead {
			line-height: 1;
			padding: 0 20rpx 30rpx;
			font-size: 24rpx;
			color: #cf4444;
		}

		.title {
			width: 60rpx;
			color: #898b94;
			margin: 0 16rpx 0 10rpx;
		}

		.content {
			font-size: 26rpx;
			color: #333;
		}

		.uni-section {
			margin-top: 32rpx;

			.uni-section-header__decoration {
				background-color: #27ba9b !important;
			}
		}

		.detail {
			display: flex;
			font-size: 26rpx;
			color: #333;
			border-bottom: 1rpx dashed #ccc;

			.detail_title {
				width: 200rpx;
			}

			.detail_content {
				flex: 1;
			}
		}

		.uni-group__content {
			padding: 0 !important;
		}

		.detail_image {
			width: 100%;
			height: 100%;
			vertical-align: middle;
		}

		.problem_nav {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			font-size: 28rpx;
			color: #333;
			background-color: #fff;

			.problem_left {
				margin-right: 6rpx;
			}
		}

		.goods-container {
			height: 100rpx;
			width: 100%;
			padding: 20rpx 0;
			background-color: #fff;
			position: fixed;
			bottom: 0;
		}

		.selected-color {
			color: #27ba9b;
		}

		.address-list {
			padding: 0 30rpx;
			background-color: #fff;
			position: relative;


			.address-list-header {
				height: 114rpx;
				width: 100%;
				line-height: 114rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: normal;
				border-bottom: 1rpx solid #ddd;
				color: #444;


				.btn-close {
					position: absolute;
					right: 30rpx;
					top: -20rpx;
				}
			}


			.address-list-body {
				// min-height: 300rpx;
				// max-height: 540rpx;
				width: 100%;
				overflow: auto;
				padding: 20rpx 10rpx !important;

				&::-webkit-scrollbar {
					display: none;
				}

				ul {
					li {
						padding: 30rpx 50rpx 30rpx 60rpx;
						background-size: 40rpx;
						background-repeat: no-repeat;
						background-position: 0 center;
						background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/locate.png);
						position: relative;

						.selected-address {
							text {
								font-size: 40rpx;
								transform: translateY(-50%);
								position: absolute;
								top: 50%;
								right: 0;
							}
						}

						.address-name {
							font-size: 28rpx;
							color: #444;
							font-weight: 500;
						}

						.address-addr {
							font-size: 26rpx;
							color: #666;
						}
					}
				}
			}

			.address-list-footer {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 0 40rpx;
				font-size: 28rpx;
				color: #444;

				button {
					flex: 1;
					background-color: #27ba9b;
					height: 72rpx;
					text-align: center;
					line-height: 72rpx;
					margin: 0 20rpx;
					color: #fff;
					border-radius: 72rpx;
					font-size: 28rpx
				}
			}
		}



		.uni-tab__cart-button-right {
			width: 220rpx;
			text-align: center;
			line-height: 72rpx;
			font-size: 26rpx;
			color: #fff;
			border-radius: 72rpx;
			margin-right: 10rpx;
		}

		.content {
			padding: 20rpx 10rpx 100rpx 20rpx !important;

			.item {
				margin-top: 20rpx;

				dt {
					margin-bottom: 10rpx;
					font-size: 28rpx;
					color: #333;
					font-weight: 500;
				}

				dd {
					line-height: 1.6;
					font-size: 26rpx;
					color: #999;
				}
			}
		}

		.footer_content {
			padding: 0 20rpx 20rpx;
			background-color: #f4f4f4;
			overflow: hidden;
			display: flex;
			flex-wrap: wrap;
			align-items: center;

			.hotGoods {
				width: 345rpx;
				padding: 24rpx 20rpx 20rpx;
				margin: 20rpx 20rpx 0 0;
				border-radius: 10rpx;
				background-color: #fff;
				box-sizing: border-box;

				image {
					height: 100%;
					width: 100%;
				}

				.hotGoods_name {
					height: 80rpx;
					margin: 10rpx 0;
					font-size: 26rpx;
					color: #262626;
				}

				.hotGoods_price {
					font-size: 20rpx;
					color: #cf4444;

					.number {
						font-size: 26rpx;
						margin-left: 2rpx;
					}
				}
			}
		}

		.hotGoods:nth-child(2n) {
			margin-right: 0 !important;
		}
	}
</style>